<template>
  <a-modal
    title="权限操作"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    okText="更新权限"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-card title="加权限" :bordered="false">
            <a-tree
              checkable
              :autoExpandParent="addTree.autoExpandParent"
              :defaultExpandAll="addTree.defaultExpandAll"
              v-model="addTree.checkedKeys"
              @check="addPermission"
              :treeData="addTree.treeData"/>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="减权限" :bordered="false">
            <a-tree
              checkable
              :autoExpandParent="reduceTree.autoExpandParent"
              :defaultExpandAll="reduceTree.defaultExpandAll"
              v-model="reduceTree.checkedKeys"
              @check="reducePermission"
              :treeData="reduceTree.treeData"/>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>
<script>
  import ATree from 'ant-design-vue/es/tree';
  import { getPermissions, getUserMenuByType } from '@/api/manage';
  import { customUserPermission } from '@/api/menu'

    export default {
      name: 'AssignPermission',
      components: {
        ATree
      },
      data() {
          return {
            visible: false,
            confirmLoading: false,
            addTree: {
              autoExpandParent: false,
              defaultExpandAll: false,
              checkedKeys: [],
              treeData: []
            },
            reduceTree: {
              autoExpandParent: false,
              defaultExpandAll: false,
              checkedKeys: [],
              treeData: []
            },
            userId: ''
          }
      },
      methods: {
        show (record) {
          const _this = this;
          _this.visible = true
          _this.userId = record.id;
          _this.confirmLoading = true;
          getPermissions().then(res => {
            _this.addTree.treeData = res.data;
            _this.reduceTree.treeData = res.data;
            // return true;
          }).then(() => {
            // 加权限
            getUserMenuByType(record.id, 1).then(res => {
              _this.addTree.checkedKeys = res.data;
            })
            // 减权限
            getUserMenuByType(record.id, 2).then(res => {
              _this.reduceTree.checkedKeys = res.data;
            })
            // return true;
          }).finally(() => {
            _this.confirmLoading = false
          })
        },
        close () {
          this.visible = false
          this.$emit('close');
        },
        handleOk () {
          const _this = this;
          _this.confirmLoading = true;
          customUserPermission(_this.userId, _this.addTree.checkedKeys, _this.reduceTree.checkedKeys)
            .then(res => {
              this.$message.success(res.message)
            }).finally(() => {
              _this.confirmLoading = false
            });
        },
        handleCancel () {
          this.close()
        },
        addPermission: function(checkedKeys, e) {
          console.log('addPermission:', checkedKeys, e)
          e.halfCheckedKeys.forEach(value => {
            const index = this.reduceTree.checkedKeys.indexOf(value);
            if (index > -1) {
              this.reduceTree.checkedKeys.splice(index, 1);
            }
          });
          checkedKeys.forEach(value => {
            const index = this.reduceTree.checkedKeys.indexOf(value);
            if (index > -1) {
              this.reduceTree.checkedKeys.splice(index, 1);
            }
          });
          this.addTree.checkedKeys = checkedKeys;
        },
        reducePermission: function(checkedKeys, e) {
          console.log('reducePermission:', checkedKeys, e)
          e.halfCheckedKeys.forEach(value => {
            const index = this.addTree.checkedKeys.indexOf(value);
            if (index > -1) {
              this.addTree.checkedKeys.splice(index, 1);
            }
          });
          checkedKeys.forEach(value => {
            const index = this.addTree.checkedKeys.indexOf(value);
            if (index > -1) {
              this.addTree.checkedKeys.splice(index, 1);
            }
          });
          this.reduceTree.checkedKeys = checkedKeys;
        }

      }
    }
</script>

<style scoped>

</style>
